<html>
    <head>
        <title>页面通讯</title>
    </head>
    <body>
        <script>
            /*
                一、uni.$emit(eventName,Object)

                          1、概述

                                触发全局自定义事件，附加参数都会传给监听器回调函数

                          2、$emit 兼容性

                                    HarmonyOS
                                    HBuilderX 4.23

                          3、参数

                                    属性	    类型	        描述

                                ①、eventName	String	    事件名

                                ②、OBJECT	    Object	    触发事件携带的附加参数


                           4、代码示例

                                      uni.$emit('update',{msg:'页面更新'})
            */

            /*
                二、uni.$on(eventName,callback)

                          1、概述

                                  监听全局的自定义事件，事件有 uni.$emit 触发，回调函数会接受事件触发函数的传入参数。

                          2、$on 兼容性

                                    HarmonyOS
                                    HBuilderX 4.23

                           3、参数

                                        属性	类型	描述

                                    ①、eventName	String	事件名

                                    ②、callback	Function	事件的回调函数

                            4、代码示例：

                                    uni.$on('update',function(data){
                                        console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
                                    })
            */

            /*
                 三、uni.$once(eventName.callback)

                           1、概述

                                    监听全局的自定义事件，事件有 uni.$emit 触发，但仅触发一次，在第一次触发之后移除该监听器。


                           2、$once 兼容性

                                       HarmonyOS
                                       HBuilderX 4.23 

                           3、代码示例：

                                    uni.$once('update',function(data){
                                        console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
                                    })
            */

            /*
                 四、uni.$off(eventName,callback)

                            1、概述

                                    移除全局自定义事件监听器。

                            2、$off 兼容性

                                        属性	    类型	        描述

                                    ①、eventName	String	    事件名

                                    ②、callback	    Function	事件的回调函数

                            3、注意点：

                                    ①、如果 uni.$off 没有传入草书，则移除App级别的所有事件监听器；

                                    ②、如果只提供了事件名 (eventName),则移除该事件名对应的所有监听器

                                    ③、如果同时提供了事件名与回调，则只移除这个事件回调的监听器

                                    ③、提供的回调必须跟 $on 的回调为同一个才能移除这个回调的监听器


                            4、代码示例：

                                    ($emit、$on、$off常用于跨页面、跨组件通讯，这里为了方便演示放在同一个页面)

                                    <template>
                                        <view class="content">
                                            <view class="data">
                                                <text>{{val}}</text>
                                            </view>
                                            <button type="primary" @click="comunicationOff">结束监听</button>
                                        </view>
                                    </template>

                                    <、script>
                                        export default {
                                            data() {
                                                return {
                                                    val: 0
                                                }
                                            },
                                            onLoad() {
                                                setInterval(()=>{
                                                    uni.$emit('add', {
                                                        data: 2
                                                    }) 
                                                },1000) // 1秒后触发add时间

                                                uni.$on('add', this.add) // 添加对 add事件监听
                                            },
                                            methods: {
                                                comunicationOff() {
                                                    uni.$off('add', this.add)  // 取消监听
                                                },
                                                add(e) {
                                                    this.val += e.data
                                                }
                                            }
                                        }
                                    <、/script>
            */

            /*
                五、注意事项

                         1、 uni.$emit 、uni.$on、uni.$once、uni.$off 触发的事件都是App全局级别的，跨任意组件，页面，nvue，Vue等。

                         2、使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$on 注册监听，onUnload 里边 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 监听

                         3、注意 uni.$on 定义完成后才能接收到 uni.$emit 传递的数据

                         4、eventName 应避免使用 uni 开头，以免与 uni-app 内置事件冲突
            */
        </script>
    </body>
</html>